<template>
  <div class="page">
    <el-form ref="form" class="custom-form" :model="form" label-width="100px">
      <el-form-item label="组织机构树" class="custom-form-item">
        <org-select
          v-model="form.orgCode"
          :defaultProps="{
            id: 'mgtOrgCode',
            label: 'name',
            children: 'children'
          }"
        />
      </el-form-item>
      <el-form-item label="日期类型可选" class="custom-form-item">
        <select-date
          ref="selectDate"
          :default-value="form.date"
          :type="type"
          @Change="Change"
          :options="['年', '月', '日']"
          :picker-options="pickerOptions"
        ></select-date>
      </el-form-item>
      <el-form-item class="custom-form-item" label-width="0px">
        <el-button type="primary">立即创建</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getPreMonth } from '@/utils/date.js'
let dateType = 'year'
export default {
  name: 'DemoOne',
  data() {
    return {
      form: {
        // orgCode: '134010112',
        orgCode: '',
        date: getPreMonth(true)
      },
      type: dateType,
      tempType: dateType,
      // 是否显示日期组件
      isShow: true
    }
  },
  computed: {
    pickerOptions({ tempType }) {
      return {
        disabledDate(time) {
          const date = new Date(), // 获取当前的时间基本信息，值是这样的： Tue Jul 20 2021 14:59:43 GMT+0800 (中国标准时间)
            // 获取当前的月份信息
            year = date.getFullYear(), // 获取当前年份，值是这样的： 2021
            month = date.getMonth() + 1, // 获取当前月份，值是这样的： 6   getMonth()方法返回值是0-11，也就是1月份到12月份，所以要加上1，才是当前月份
            // 获取时间选择器的月份信息
            timeyear = time.getFullYear() // 获取时间选择器的年份（有很多）
          let timemonth = time.getMonth() + 1 // 与上面同理
          if (tempType === 'month') {
            const nowDate = year.toString() + String(month).padStart(2, '0'), // 转换成字符串拼接，最终得到年和月，比如此时的时间是2021年7月20号，所以nowDate的值是：202107
              elTimeData =
                timeyear.toString() + String(timemonth).padStart(2, '0')
            return elTimeData >= nowDate // 这里虽然是字符串，但是弱类型语言js会做一个转换，是可以比较大小的如： '202107' > '202008'
          } else if (tempType === 'year') {
            return timeyear > year
          }
        }
      }
    }
  },
  methods: {
    /**
     * @description 选择节点
     * @param {Object} obj 节点信息
     * @return {string} xxx
     */
    selectMgtOrgCode(obj) {
      this.form.orgCode = obj.orgNo
      console.log(obj, 'obj77777')
    },
    /**
     * @description 日期选择触发事件
     * @param {Object} obj  日期信息
     * @return void
     */
    Change(obj) {
      console.log(obj, 'objTime')
      this.tempType = obj.type
    },
    // 重置
    onReset() {
      this.$refs.selectDate.reset()
      this.form = this.$options.data().form
    }
  }
}
</script>
<style lang="scss" scoped>
.custom-form {
  display: flex;
  flex-wrap: wrap;
  .custom-form-item {
    width: calc(100% / 3);
    &:last-child {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
